/*
 * @Author: folusGan 245942153@qq.com
 * @Date: 2024-07-08 18:05:22
 * @LastEditors: folusGan 245942153@qq.com
 * @LastEditTime: 2024-07-08 18:05:30
 * @Description:
 */
const card = document.querySelector('.card')
//设置一个旋转角度的范围。
const xRange = [-10, 10]
const yRange = [-10, 10]

function getRotate(range, value, max) {
  return (value / max) * (range[1] - range[0]) + range[0]
} //获取旋转范围的函数

card.onmousemove = (e) => {
  const { offsetX, offsetY } = e
  const { offsetWidth, offsetHeight } = card
  const ry = -getRotate(yRange, offsetX, offsetWidth)
  const rx = getRotate(xRange, offsetY, offsetHeight)
  card.style.setProperty('--ry', `${ry}deg`)
  card.style.setProperty('--rx', `${rx}deg`)
  //ai真的太好用了
}
// 最后鼠标移出时偏移的角度归零。
card.onmouseleave = () => {
  card.style.setProperty('--ry', 0)
  card.style.setProperty('--rx', 0)
}
//牛而逼之，明天复盘一下。
